<template>
  <div ref="chart" :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons')
  export default {
    name: 'ECharts',
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '650px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null,
        sidebarElm: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(newOptions) {
          this.setOptions(newOptions)
        }
      }
    },
    mounted() {
      this.chart = echarts.init(this.$el, 'macarons')
      // this.setOptions()
      if (this.autoResize) {
        if (this.chart) {
          this.chart.resize()
        }
        window.addEventListener('resize', this.__resizeHandler)
      }
      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    methods: {
      setOptions({
        infos,
        dataA,
        dataB
      } = {}) {
        this.chart.setOption({
          title: {
            text: '太空舱收益'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          legend: {
            show: true,
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          dataZoom: [{
            yAxisIndex: 0,
            type: "slider",
            startValue: 0, // 从头开始。
            endValue: 6, // 一次性展示5个
          }],
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {
              show: true
            }
          },
          yAxis: {
            name: '太空舱基地',
            type: 'category',
            data: infos,
            axisLine: {
              show: true
            },
            axisLabel: {
              color: '#333',
              fontSize: '14',
            }
          },
          series: [{
            name: '实际收益/元',
            type: 'bar',
            data: dataB,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }, {
            name: '实际订单量/条',
            type: 'bar',
            data: dataA,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }]
        })
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }
      this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
      this.chart.dispose()
      this.chart = null
    },
  }
</script>
